require('../css/commonCss/normalize.css')
require('../css/commonCss/basic.css')
require('../css/commonCss/property.css')
require('../css/commonCss/reset.css')
require('../liabs/iconfont/iconfont.css')

require('../css/information.less')


//引入weui
require('weui')
const weui = require('weui.js')

const axios = require('axios')
//文档加载事件
document.addEventListener('DOMContentLoaded', function () {

    //返回上一个页面
    document.querySelector('#goBack').addEventListener('click', function () {
        history.go(-1)
    })

    //性别
    document.querySelector('#sexPicker').addEventListener('click', function () {
        weui.picker([{
            label: '男',
            value: 0
        }, {
            label: '女',
            value: 1
        }], {
            onConfirm: function (result) {
                console.log(result[0].label);
                document.querySelector('#sex').textContent = result[0].label;
            },
            title: '请选择性别'
        });
    });


    //从后端获取所有的省份
    let proArr = []; //这是所有的省份
    let cityArr = []; //从后端获取的城市
    axios.get('http://139.9.177.51:8099/address/province')
        .then(function (res) {
            // console.log(res.data.data)
            let data = res.data.data;
            /* console.log(data) */
            proArr = data.map(function (item) { //处理成所需要的格式
                return { label: item.name, value: item.addressId }
            })
            /* console.log(proArr) */
        })
    /* console.log(proArr) */
    //省份
    document.querySelector('#provincePicker').addEventListener('click', function () {
        weui.picker(proArr, {
            //确定
            onConfirm: function (result) {
                console.log(result[0].label);
                document.querySelector('#province').textContent = result[0].label;
                //获取pid
                let pid = result[0].value;
                console.log(pid)
                //从后端获取城市
                axios.get('http://139.9.177.51:8099/address/city/' + pid)
                    .then(function (res) {
                        let data = res.data.data;
                        cityArr = data.map(function (item) {
                            return { label: item.name, value: item.addressId }
                        })
                        //清除上次的城市选择
                        document.querySelector('#city').textContent = '请选择';
                    })
            },
            title: '请选择省份'
        });
    });

    //城市
    document.querySelector('#cityPicker').addEventListener('click', function () {
        weui.picker(cityArr, {
            onConfirm: function (result) {
                console.log(result[0].label);
                document.querySelector('#city').textContent = result[0].label;
            },
            title: '请选择城市'
        });
    });


    //补零函数
    function fillZero(n) {
        return n < 10 ? '0' + n : n;
    }
    //生日
    document.querySelector('#birthdayPicker').addEventListener('click', function () {
        weui.datePicker({
            start: new Date().getFullYear() - 80,
            end: new Date().getFullYear(),
            onConfirm: function (result) {
                let date = [result[0].value, fillZero(result[1].value), fillZero(result[2].value)].join('-');
                /* console.log(date) */
                /* console.log(result) */

                //渲染日期
                document.querySelector('#birthday').textContent = date;
            },
            title: '请选择生日'
        });
    });

    
    //更换头像
    //获取元素
    const inputfile = document.querySelector('#inputfile')
    const portrait = document.querySelector('#portrait')
    /* console.log(portrait) */
    //给input框添加一个change事件
    inputfile.addEventListener('change', function () {
        // console.log(this.files[0])
        let file = this.files[0]; 
        //图片上传必须使用FormData()对象,所以需要实例化一个FormData对象
        let fd = new FormData();
        //将图片追加到userimg中
        fd.append('imgurl', file)
        /* console.log(fd) */

        axios.post('http://139.9.177.51:8099/users/upload', fd).then(function (res) {
            console.log(res.data.data)
            if (res.data.status === 1) {
                weui.confirm(res.data.msg)
            } else {
                portrait.src = 'http://139.9.177.51:8099' + res.data.data
            }
        })
    })

    /* 点击图片触发点击input事件 */
    portrait.addEventListener('click', function () {
        inputfile.click()
    })

    //保存用户信息
    const savaBtn = document.querySelector('#savaBtn')
    savaBtn.addEventListener('click', function () {
        let params = {
            imgurl: document.querySelector('#portrait').src,
            nickname: document.querySelector('#nickname').value,
            gender: document.querySelector('#sex').textContent,
            birthday: document.querySelector('#birthday').textContent,
            sign: document.querySelector('#sign').value,
            address: [document.querySelector('#province').textContent,document.querySelector('#city').textContent],
            userId: localStorage.getItem('userId')
        }
        console.log(params)

        axios.post('http://139.9.177.51:8099/users/userEdit',params)
        .then(function(res){
            if(res.data.status === 0){ //状态码等于0的时候成功
                weui.toast('修改成功',{
                    callback:function(){ //回调函数
                        location.href = './mine.html'
                    }
                });
               
            }else{
                weui.alert('修改失败')
            }
        })
    })

    //信息回填
    axios.get('http://139.9.177.51:8099/users/accountinfo',{
        params:{
            userId: localStorage.getItem('userId')
        }
    }).then(function(res){
        console.log(res.data.data)
        let data = res.data.data;
        //渲染昵称
        document.querySelector('#nickname').value = data.nickname;
        //其他信息是当新用户刚注册时,没有的信息,所以需要判断
        if(data.imgurl){
            document.querySelector('#portrait').src = data.imgurl;
        }
        if(data.gender){
            document.querySelector('#sex').textContent = data.gender;
        }
        if(data.address){
            document.querySelector('#province').textContent = data.address.split(',')[0]
            document.querySelector('#city').textContent = data.address.split(',')[1]
        }
        if(data.sign){
            document.querySelector('#sign').value = data.sign;
            textNum.textContent = sign.value.length;
        }
        if(data.birthday){
            document.querySelector('#birthday').textContent = data.birthday.substr(0,10);
        }
    })

    document.querySelector('#sign').addEventListener('input',function(){
        document.querySelector('#textNum').textContent = sign.value.length;
    })
})


